<!--Section heading-->
<div class="row animated fadeInRight">
  <!--Grid column-->
  <div class="col-lg-5 mt-5 mx-auto">
    <mdb-card cascade="true" narrower="true">
      <!--Card image-->
      <div
        class="view view-cascade gradient-card-header peach-gradient narrower z-depth-2 rounded-lg  py-2 m-3 mt-n4 text-center">
        <div class="m-3">
          <h4 class="white-text">修改密码</h4>
        </div>
      </div>
      <!--/Card image-->
      <mdb-card-body>
        <!--Body-->

        <div class="md-form">
          <mdb-icon fas icon="key" class="prefix blue-text"></mdb-icon>
          <input mdbInput type="password" id="form22" class="form-control" minlength="4" maxlength="16"
                 [(ngModel)]="oldPw">
          <label for="form22">原始密码</label>
          <mdb-error *ngIf="oldPw==''||oldPw.length<3" class="mt-0">请输入原密码</mdb-error>
        </div>

        <div class="md-form">
          <mdb-icon fas icon="key" class="prefix blue-text"></mdb-icon>
          <input mdbInput type="password" id="form2" class="form-control" minlength="4" maxlength="16"
                 [(ngModel)]="newPw">
          <label for="form2">新密码(4-16个字符)</label>
          <mdb-error *ngIf="newPw==''||newPw.length<4" class="mt-0">密码强度太低</mdb-error>
        </div>

        <div class="md-form">
          <mdb-icon fas icon="key" class="prefix"></mdb-icon>
          <input mdbInput type="password" id="form32" class="form-control" minlength="4" maxlength="16"
                 [(ngModel)]="newPw1">
          <label for="form32">确认新密码</label>
          <mdb-error *ngIf="!isSamePwd()" class="mt-0">两次输入密码不相同
          </mdb-error>
        </div>
        <!-- Regular usage -->
        <!-- <re-captcha (resolved)="resolved($event)" siteKey="YOUR_SITE_KEY"></re-captcha> -->

        <div class="text-center">
          <button mdbBtn class="btn peach-gradient" mdbWavesEffect (click)="updatePassword();">确定</button>
        </div>

      </mdb-card-body>

    </mdb-card>
    <!--Form with header-->
    <mdb-card>


    </mdb-card>
    <!--Form with header-->

  </div>
  <!--Grid column-->
</div>
<div mdbModal #failModal="mdbModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-notify modal-danger" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center">
        <p *ngIf="feedback==-1" class="heading">原密码输入错误！</p>
        <p *ngIf="feedback==0" class="heading">修改失败！</p>
        <p *ngIf="feedback==2" class="heading">意料之外的错误！</p>
      </div>
      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" mdbBtn color="danger" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal"
           (click)="failModal.hide()">确定</a>
      </div>
      <strong>若一直修改不了请联系管理员</strong>
    </div>
    <!--/.Content-->
  </div>
</div>
<div mdbModal #successModal="mdbModal" class="modal fade" tabindex="-1" role="dialog"
     aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-notify modal-success" role="document">
    <!--Content-->
    <div class="modal-content text-center">
      <!--Header-->
      <div class="modal-header d-flex justify-content-center">
        <p class="heading">修改成功，请重新登录！</p>
      </div>
      <!--Footer-->
      <div class="modal-footer justify-content-center">
        <a type="button" mdbBtn color="success" outline="true" class="waves-light" mdbWavesEffect data-dismiss="modal"
           (click)="successModal.hide();successUpdate()">确定</a>
      </div>
    </div>
    <!--/.Content-->
  </div>
</div>
